import { Button, Form, Input, Toast } from "antd-mobile";
import { Link } from "react-router-dom";
import { regAPI } from "../services/auth";
import { dalImg } from "../utils/tools";

function Reg() {
  return (
    <div className="login">
      <Link to="/">
        <img src={dalImg("")} className="logo" alt="" />
      </Link>
      <Form
        // onFinish事件在触发submit的时候执行
        onFinish={async (v) => {
          // console.log(v);
          const res = await regAPI(v);
          if (res.success) {
            Toast.show({
              icon: "success",
              content: "注册成功",
            });
          } else {
            Toast.show({
              icon: "fail",
              content: res.data,
            });
          }
        }}
      >
        <Form.Item
          // name属性表示表单提交的时候的数据的属性名，一定要有
          name="userName"
          label="用户名"
          rules={[
            {
              required: true,
              message: "用户名不能为空",
            },
          ]}
        >
          <Input placeholder="请输入用户名" clearable />
        </Form.Item>
        <Form.Item name="password" label="密码">
          <Input type="password" clearable placeholder="请输入密码" />
        </Form.Item>
        <Form.Item>
          <Button type="submit" color="primary">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default Reg;
